<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer
      :title="ConfigTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="70%"
      :wrapperClosable="false"
    >
      <div class="layout">
        <el-form
          label-position="left"
          :inline="true"
          size="small"
          ref="eventsForm"
          :model="eventsForm"
        >
          <el-alert
            v-if="ConfigTitle == '禁用对象'"
            style="margin-bottom: 20px"
            title="禁用对象是指禁止参与该活动的用户"
            type="warning"
            :closable="false"
          ></el-alert>
          <el-alert
            v-else
            style="margin-bottom: 20px"
            title="重复对象是指以下用户正在同时参与其他抽奖活动，暂无法参与该抽奖活动；需等当前抽奖活动结束后才可参与该抽奖活动；可以对重复用户进行禁用处理，即不能参与该抽奖活动"
            type="warning"
            :closable="false"
          ></el-alert>
          <div class="configform-box">
            <el-form-item
              label="用户昵称"
              class="form-box-item"
              prop="activity_name"
            >
              <el-input
                placeholder="请输入用户昵称"
                v-model="eventsForm.activity_name"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="用户地区" class="form-box-item" prop="region">
              <el-select
                v-model="eventsForm.region"
                multiple
                collapse-tags
                placeholder="请选择适用区域"
              >
                <el-option
                  v-for="item in regions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户群组" class="form-box-item" prop="region">
              <el-select
                v-model="eventsForm.region"
                multiple
                collapse-tags
                placeholder="请选用户分组"
              >
                <el-option
                  v-for="item in regions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户等级" class="form-box-item" prop="region">
              <el-select
                v-model="eventsForm.region"
                multiple
                collapse-tags
                placeholder="请选用户等级"
              >
                <el-option
                  v-for="item in regions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户标签" class="form-box-item" prop="region">
              <el-select
                v-model="eventsForm.region"
                multiple
                collapse-tags
                placeholder="请选用户标签"
              >
                <el-option
                  v-for="item in regions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户会员" class="form-box-item" prop="region">
              <el-select
                v-model="eventsForm.region"
                multiple
                collapse-tags
                placeholder="请选用户等级"
              >
                <el-option
                  v-for="item in regions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户状态" class="form-box-item" prop="status">
              <el-select v-model="eventsForm.status" placeholder="请选择状态">
                <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="height: 30px" @click="inquire"
                >查询</el-button
              >
              <el-button style="height: 30px" @click="resetForm('eventsForm')"
                >重置</el-button
              >
              <el-button
                v-if="ConfigTitle == '禁用对象'"
                type="primary"
                style="height: 30px"
                @click="Batchdeletion('1')"
                >批量取消禁用</el-button
              >
              <el-button
                v-else
                type="primary"
                style="height: 30px"
                @click="Batchdeletion('2')"
                >批量禁用</el-button
              >
            </el-form-item>
          </div>
          <div class="configform-box">
            <div>
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="data"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  align="center"
                  prop="id"
                  label="用户id"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="nickname"
                  label="用户昵称"
                ></el-table-column>
                <el-table-column align="center" prop="region" label="用户区域">
                  <template slot-scope="scope">
                    {{
                      scope.row.province_name ? scope.row.province_name : "-"
                    }}
                    {{ scope.row.city_name ? scope.row.city_name : "-" }}
                  </template>
                </el-table-column>
                <el-table-column
                  width="200"
                  align="center"
                  prop="group"
                  label="用户群组"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="scope.row.group_name"
                      placement="top"
                    >
                      <div
                        v-if="scope.row.group_name"
                        style="display: flex; justify-content: center"
                      >
                        <div>{{ scope.row.group_name }}</div>
                      </div>
                    </el-tooltip>
                    <div v-if="!scope.row.group_name">-</div>
                  </template>
                </el-table-column>
                <el-table-column
                  width="200"
                  align="center"
                  prop="tag"
                  label="用户标签"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="scope.row.tag_name.join('/')"
                      placement="top"
                    >
                      <div
                        v-if="scope.row.tag_name.length !== 0"
                        style="display: flex; justify-content: center"
                      >
                        <div
                          v-if="index < 3"
                          v-for="(item, index) in scope.row.tag_name"
                          :key="index"
                        >
                          {{ item }} /
                        </div>
                        <div
                          v-if="scope.row.tag_name.length > 3"
                          class="table-num"
                        >
                          + {{ scope.row.tag_name.length }}
                        </div>
                      </div>
                    </el-tooltip>
                    <div v-if="scope.row.tag_name.length == 0">-</div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="status"
                  label="参与活动状态"
                ></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      v-if="ConfigTitle == '禁用对象'"
                      @click="deletion('1')"
                    >
                      移除黑名单
                    </el-button>
                    <el-button type="text" v-else @click="deletion('2')">
                      加入黑名单
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="tablevalue.total > 0"
                :total="tablevalue.total"
                :page.sync="tablevalue.page"
                :limit.sync="tablevalue.count"
                @pagination="gettable"
              />
            </div>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: "detail",
  props: ["ConfigTitle", "data"],
  components: {},
  mounted() {
    console.log(this.data, 123456456);
  },
  data() {
    return {
      drawer: true,
      activeName: "first",
      status: [
        { name: "过期", id: "-1" },
        { name: "开启", id: "1" },
        { name: "进行中", id: "2" },
        { name: "关闭", id: "3" },
      ],
      regions: [
        { name: "全国", id: "-1" },
        { name: "武汉", id: "1" },
        { name: "北京", id: "2" },
        { name: "郑州", id: "3" },
      ],
      eventsForm: {
        award_name: "", // 抽奖活动名称
        time: "",
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        totalPrizeRulesLimited: "",
        extraTimes: [], //额外次数
        region: [], //生效区域
      },
      loading: false,
      tablevalue: {
        all_user: 0,
        disabled_user: 0,
        repeat_user: 0,
        page: 1,
        count: 10,
        total: 3,
        dataList: [],
      },
      dataList1: [
        {
          id: 1,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          status: "已参加",
        },
        {
          id: 2,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          status: "已参加",
        },
        {
          id: 3,
          name: "qqq",
          region: "北京",
          group: "中年",
          tag: "男",
          status: "已参加",
        },
      ],
      dialogTableVisible: false,
      multipleSelection: [],
    };
  },
  methods: {
    //查询
    inquire() {
      this.loading = true;
      this.tablevalue.dataList = this.dataList1;
      this.loading = false;
    },
    // 关闭抽屉
    closedinvitation() {
      this.$parent.closeConfig();
    },
    gettable() {
      this.loading = true;
      this.tablevalue.dataList = this.dataList1;
      this.loading = false;
    },
    handleSelectionChange() {},
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量
    Batchdeletion(type) {
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择用户", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      } else {
        if (type == "1") {
          this.$confirm("确定要将已选择用户取消禁用吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                message: "批量取消禁用成功",
                type: "success",
              });
            })
            .catch(() => {});
        } else {
          this.$confirm("确定要将已选择用户禁用吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$message({
                message: "批量禁用成功",
                type: "success",
              });
            })
            .catch(() => {});
        }
      }
    },
    deletion(type) {
      if (type == "1") {
        this.$confirm("确定要将该用户取消禁用吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              message: "取消禁用成功",
              type: "success",
            });
          })
          .catch(() => {});
      } else {
        this.$confirm("确定要将该用户禁用吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              message: "禁用成功",
              type: "success",
            });
          })
          .catch(() => {});
      }
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .configform-box {
    .form-box-item {
      .el-form-item__label {
        font-size: 12px;
        font-weight: 500;
        width: 80px;
      }

      .el-input {
        width: 200px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.configform-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}
</style>